<#include "/layout/layout.ftl"/>

<@body>
<link href="/lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<link href="/lib/jsoneditor/css/jsoneditor.min.css" rel="stylesheet" />
<script src="/lib/jsoneditor/js/jsoneditor.min.js"></script>
<script src="/script/tool/map.js"></script>
<script src="/script/tool/http.js"></script>
<script src="/script/tool/keyValueUtil.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <label class=" col-md-1" for="interfaceName">URL地址:</label>
            <div class="col-md-9">
                <input type="text" class="form-control" id="interfaceName">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label class="col-md-1" for="interfaceName">host:</label>
            <div class="col-md-9">
                <input type="text" class="form-control" id="host">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label class=" col-md-1" for="interfaceMethod">方法名:</label>
            <div class="col-md-1">
                <select id="interfaceMethod" class="form-control" onchange="methodSwitch(this)">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                </select>
            </div>
            <label class=" col-md-1" for="zkAddress">编码:</label>
            <div class="col-md-1">
                <select id="encoding" class="form-control">
                    <option >UTF-8</option>
                    <option >GBK</option>
                </select>
            </div>
            <label class="col-md-1" for="zkAddress">超时(秒):</label>
            <div class="col-md-1">
                <select id="timeout" class="form-control"  >
                    <option value="5" >5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select>
            </div>
            <input type="button" class="btn btn-primary" value="增加header"  id="addHeader"/>
            <input type="button" class="btn btn-primary" value="增加URL参数" id="addParam" />
            <input type="button" class="btn btn-primary" value="执行调用" onclick="invoke()"/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label class="col-md-1" for="urlHeader">Header:</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="hidden" id="headers">
            <div id="urlHeader"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
            <h4>入参:</h4>
            </div>
            <div class="col-md-6">
                <h4>结果:</h4>
            </div>
        </div>
    </div>
    <div class="row myrow">
        <div class="col-md-12">
            <div class="col-md-6">
                <div id="param" style="width: 100%;height: 100%">
                    <input type="hidden" id="urlParams">
                    <div id="urlParam"></div>
                    <textarea id="body"></textarea>
                </div>
            </div>
            <div class="col-md-6">
                <#--<div id="result"></div>-->
                <textarea id="result">

                </textarea>
            </div>
        </div>
    </div>
</div>

    <script>
        var headerParam;
        var urlParam;
        $(function () {
            headerParam=new KeyValueUtil();
            //第一个参数在哪里增加子元素，第二个参数点击哪个按钮，第三个参数结果写到哪个隐藏标签
            headerParam.init($('#urlHeader'),$("#addHeader"), $("#headers"));
            urlParam=new KeyValueUtil();
            //第一个参数在哪里增加子元素，第二个参数点击哪个按钮，第三个参数结果写到哪个隐藏标签
            urlParam.init($('#urlParam'),$("#addParam"), $("#urlParams"));
            //body 参数输入框隐藏
            $("#urlBody").hide();
        });

    </script>

    <style>
        .row {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .myrow{
            height: 64%;
        }

        label {
            vertical-align: middle
        }
        textarea{
            width: 100%;
            height: 100%;
            min-width: 100%;
            min-height: 100%;
            max-height: 100%;
            max-width: 100%;
        }
        /*select{*/
            /*width: 100%;*/
            /*height: 34px;*/
        /*}*/
    </style>
</@body>